<template>
  <view class="page">

    <!-- 背景图片 -->
    <image
        src="/static/bj-001.jpg"
        mode="aspectFill"
        class="bg-image">
    </image>

    <scroll-view class="scroll-container" scroll-y>
      <view class="white-box">
        <view class="title" style="text-align: center;color: #004AAC;font-size: 50rpx;">活动规则</view>
        <!-- 使用 v-html 渲染 HTML 内容 -->
        <view class="title2" v-html="activity.eventContent"></view>
      </view>
    </scroll-view>

    <view>
      <text class="next-btn" @click="goBack">阅读完毕</text>
      <image class="cloud-image"
             src="/static/images/yunduo.png"  ></image>
    </view>

  </view>
</template>

<script>
import {getProActivity} from "@/api/activity/activity"

export default {
  data() {
    return {
      activity: {
        startTime: "",
        endTime: "",
        eventContent: "",
      }
    }
  },
  // 在成功页获取数据
  onLoad() {
    this.getProActivity()
  },
  methods: {
    getProActivity(){
      getProActivity().then(res => {
        this.$set(this.activity,"startTime", res.data.startTime);
        this.$set(this.activity,"endTime", res.data.endTime);
        this.$set(this.activity,"eventContent", res.data.eventContent);
      })
    },
    goBack() {
      setTimeout(() => {
        uni.navigateBack({ delta: 1 });
      }, 300);
    }
  }
}
</script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Source+Han+Serif&display=swap');
@font-face {
  font-family: 'minikt';
  src: url('@/static/font/minikt.TTF') format('truetype');
}
.page {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 让背景在底层 */
}

.scroll-container {
  position: relative;
  z-index: 1;
  height: 90%;
  width: 100%;
  background-color: transparent; /* 新增：设置背景为透明 */
}

.white-box {
  width: 90vw;
  max-width: 800px;
  background-color: #ffffff;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  margin: 30px auto;
}

.title {
  color: #333333; /* 修改：将字体颜色改为不伤眼睛的黑色 */
  font-size: 14px;
  font-weight: 580; /* 修改：将字体加黑 */
  font-family: 'minikt';
  text-align: left; /* 修改：将文字靠左 */
  display: block;
  margin-bottom: 30px;
}
.title2 {
  color: #333333; /* 修改：将字体颜色改为不伤眼睛的黑色 */
  font-size: 27rpx;
  font-weight: 580; /* 修改：将字体加黑 */
  font-family: 'Source Han Serif', '宋体', SimSun, serif;;
  text-align: left; /* 修改：将文字靠左 */
  display: block;
  margin-bottom: 30px;
  line-height: 1.6; /* 调整行高 */
}
.next-btn {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3; /* 确保按钮在上层 */
  color: #004AAC;
  font-size: 50rpx;
  font-family: 'minikt', sans-serif;
  text-align: center;
  display: block;
  padding: 10px 20px;
  border-radius: 10px;
}

.cloud-image {
  position: absolute;
  bottom: -75rpx;
  left: 50%;
  transform: translateX(-48%);
  width: 500rpx; /* 调整宽度为600rpx */
  height: 310rpx;
  z-index: 2; /* 确保图片在下层 */
  opacity: 1; /* 添加透明度，使白云图案与背景图融合 */
}
</style>